<nz-card>
  <!-- S 基础信息 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      基础信息
    </p>
    
    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动类型</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group
            [(ngModel)]="formParams.type"
            (ngModelChange)="couponTypeChange($event)">
            <label nz-radio [nzValue]="1">满减</label>
            <label nz-radio [nzValue]="2">满折</label>
            <label nz-radio [nzValue]="3">多件折扣</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动名称</nz-form-label>
        <nz-form-control nzFlex="400px">
          <input nz-input maxlength="15" placeholder="仅内部可见" [(ngModel)]="formParams.name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>前端标题</nz-form-label>
        <nz-form-control nzFlex="400px">
          <input nz-input maxlength="20" placeholder="请输入前端标题" [(ngModel)]="formParams.showCopy" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">备注</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="仅内部可见"
              [(ngModel)]="formParams.remark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>优惠券叠加</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-radio-group [(ngModel)]="formParams.isPlusCoupons">
            <label nz-radio [nzValue]="0">是</label>
            <label nz-radio [nzValue]="1">否</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="[1, 2].includes(formParams.type)">
        <nz-form-label nzFlex="120px" nzRequired>优惠门槛</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <span class="p-r-6">订单满</span>
            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="100000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.orderLimitMoney"
              (nzBlur)="discountLimitChange(0)"
            ></nz-input-number>
            <span class="p-l-6">元可用</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formParams.type === 1">
        <nz-form-label nzFlex="120px" nzRequired>减免额度</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-input-number
            style="width: 120px;"
            [nzMin]="1"
            [nzMax]="10000"
            [nzStep]="1"
            [nzPrecision]="0"
            nzPlaceHolder="请输入"
            [(ngModel)]="formParams.limitSmall"
            (nzBlur)="discountLimitChange(1)"
          ></nz-input-number>

          <span class="p-l-6">元</span>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formParams.type === 1">
        <nz-form-label nzFlex="120px" nzRequired>倍数减免</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-radio-group [(ngModel)]="formParams.overlayFlag">
            <label nz-radio [nzValue]="0">否</label>
            <label nz-radio [nzValue]="1">是</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formParams.type === 2">
        <nz-form-label nzFlex="120px" nzRequired>折扣力度</nz-form-label>
        <nz-form-control nzFlex="500px">
          <span class="p-r-6">打</span>
          <nz-input-number
            style="width: 120px;"
            [nzMin]="0.1"
            [nzMax]="9.9"
            [nzPrecision]="1"
            [nzStep]="0.1"
            nzPlaceHolder="请输入"
            [(ngModel)]="formParams.limitSmall"
          ></nz-input-number>
          <span class="p-l-6">折</span>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formParams.type === 2">
        <nz-form-label nzFlex="120px" nzRequired>最高减免</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="100000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitBig"
            ></nz-input-number>

            <span class="p-l-6">元</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <!-- S 多件折扣 -->
      <ng-container *ngIf="formParams.type == 3">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>优惠内容</nz-form-label>
          <nz-form-control nz-col nzFlex="500px">
            <nz-table
              #editRowTable
              nzBordered
              nzSize="small"
              [nzShowPagination]="false"
              [nzFooter]="discountTable?.length < 5 ? editTableFoot : null"
              [nzData]="discountTable">
              <thead>
                <tr>
                  <th nzAlign="center">>=件数</th>
                  <th nzAlign="center">折扣率</th>
                  <th nzAlign="center">最多减免</th>
                  <th nzAlign="center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of editRowTable.data; let index = index;">
                  <td nzAlign="center">
                    <nz-input-number
                      [nzMin]="limitMinInput(index)"
                      [nzMax]="limitMaxInput(index)"
                      [nzStep]="1"
                      [nzPrecision]="0"
                      [(ngModel)]="data.number"
                    ></nz-input-number>
                  </td>
                  <td nzAlign="center">
                    <nz-input-number
                      [nzMin]="0.1"
                      [nzMax]="9.9"
                      [nzStep]="1"
                      [nzPrecision]="1"
                      [(ngModel)]="data.discountRate"
                    ></nz-input-number>
                  </td>
                  <td nzAlign="center">
                    <nz-input-number
                      [nzMin]="1"
                      [nzMax]="100000"
                      [nzStep]="1"
                      [nzPrecision]="0"
                      [(ngModel)]="data.maxReduction"
                    ></nz-input-number>
                  </td>
                  <td nzAlign="center">
                    <a nz-button nzType="link" nzDanger (click)="deleteDiscountItem(index)">删除</a>
                  </td>
                </tr>
              </tbody>
              <ng-template #editTableFoot>
                <div nz-row nzJustify="center">
                  <button nz-button nzType="link" (click)="addDiscountItem()">
                    <i nz-icon nzType="plus" nzTheme="outline"></i>
                    添加
                  </button>
                </div>
              </ng-template>
            </nz-table>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <!-- E 多件折扣 -->
    </div>
  </div>
  <!-- E 基础信息 -->

  <nz-divider></nz-divider>

  <!-- S 使用设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      使用设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>适用品类</nz-form-label>
        <nz-form-control nzFlex="520px">
          <zdy-checkbox-group
            *ngIf="categoryOptions.length"
            [checkOptions]="categoryOptions"
            [checkKeys]="{
              key: 'groupId',
              label: 'textureName'
            }"
            [isAllCheck]="false"
            [(ngModel)]="selectedCategory"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>参与人限制</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group [(ngModel)]="formParams.userType">
            <label
              *ngFor="let o of userTypeOptions"
              nz-radio
              [nzValue]="o.value"
            >{{ o.label }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>生效时间</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-range-picker
            [nzShowTime]="true"
            [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="takeEffectDates"
            (ngModelChange)="onDateChange($event, ['beginTime', 'endTime'])"
          ></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 使用设置 -->
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center" nzAlign="top">
    <button
      *ngIf="[5].includes(formParams.status)"
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="releaseLoading"
      (click)="subRelease()"
    >发布</button>
    
    <button
      nz-button
      nzType="default"
      class="m-r-10"
      [nzLoading]="preservationLoading"
      (click)="submitForms(1)"
    >保存</button>
    
    <button
      nz-button
      nzType="dashed"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>